<template>
  <div style="height:100%;">
    <app-header></app-header>
    <vue-better-scroll class="wrapper"
                       ref="scrollqq"
                       :scrollbar="scrollbarObj"
                       :pullDownRefresh="pullDownRefreshObj"
                       :pullUpLoad="pullUpLoadObj"
                       :startY='parseInt(startY)'
                       @pulling-down="onPullingDown"
                       @pulling-up="onPullingUp">
      <div class="allTrain">
        <div class="train_div">
          <h3><span></span>专题培训班</h3>
          <div class="seach">
            <input type="text" placeholder="请输入培训班名称" v-model="listQuery.trainClassName" @keyup.enter="search">
            <span @click="search"></span>
          </div>
        </div>
        <div class="type">
          <label>分类:</label>
          <ul class="typeList1">
            <li v-for="(item,index) in typeList1" :key="index" :class="{'active': activeName == item.typeName}" @click="chooseUserType(item)">{{item.typeName}}</li>
          </ul>
          <span class="showMore" :class="{'hideMore':toggle}" @click="showMore"></span>
          <ul class="typeList2" v-if="toggle">
            <li v-for="(item,index) in typeList2" :key="index" :class="{'active': activeName == item.typeName}" @click="chooseUserType(item)">{{item.typeName}}</li>
          </ul>
        </div>
        <div class="curse_box">
          <ul class="curse_list">
            <li v-for="(item, index) in trainClassList" :key="index" class="curse_item">
              <img :src="item.trainClassImg" />
              <div class="item_right">
                <h4>{{item.trainClassName}}</h4>
                <p>报名时间:{{item.applyStartDate.substr(0,10)}}至{{item.applyEndDate.substr(0,10)}}</p>
                <div class="btnBox">
                  <router-link :to="{name:'unitStudent',query:{id:item.id}}" class="baoBtn" v-if="item.isEnterprise">我要报名</router-link>
                  <router-link :to="{name:'emergencyStudent',query:{id:item.id}}" class="baoBtn" v-if="!item.isEnterprise">我要报名</router-link>
                  <router-link :to="{name:'trainDetail',query:{id:item.id}}" class="detailBtn">查看详情</router-link>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </vue-better-scroll>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import { } from 'vux'
  import { getUserType, getVTrainClassPageList } from '@/api/index';
  import VueBetterScroll from "vue2-better-scroll"
  export default {
    name: 'allTrain',
    components: {
      "app-header": Header,
      VueBetterScroll
    },
    data() {
      return {
        trainClassList: [],
        typeList1: [],
        typeList2: [],
        activeName: '全部',
        toggle: false,
        listQuery: {
          pi: 1,
          ps: 4,
          skipCount: 0,
          maxResultCount: 4,
          trainClassName: '',
          userType: '-1'
        },
        scrollbarObj: { fade: true },
        pullDownRefreshObj: {
          threshold: 90,
          stop: 40
        },
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据了"
          }
        },
        startY: 0,
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700
      }
    },
    created() {
      this.$vux.loading.show({
        text: "Loading"
      });
      getUserType().then(response => {
        if (response.length >= 4) {
          this.typeList1 = [{ typeName: '全部' }].concat(response.slice(0, 3));
          this.typeList2 = response.slice(3);
        } else {
          this.typeList1 = response;
          this.typeList2 = [];
        }        
        this.onPullingDown();
      })
    },
    methods: {
      showMore: function () {
        this.toggle = !this.toggle
      },
      search() {
        let that = this;
        that.listQuery.pi = 1;
        that.listQuery.skipCount = (that.listQuery.pi - 1) * that.listQuery.ps;
        getVTrainClassPageList(this.listQuery).then(response => {
          this.trainClassList = response.items;
          this.$refs['scrollqq'].forceUpdate(true);
          this.$vux.loading.hide();
        })
      },
      fetchData() {
        let that = this;
        this.$vux.loading.show({
          text: "Loading"
        });
        getVTrainClassPageList(this.listQuery).then(response => {
          this.trainClassList = this.trainClassList.concat(response.items);
          let totalAllCount = response.totalCount;
          let resultCount = this.trainClassList.length;
          if (parseInt(resultCount) < parseInt(totalAllCount)) {
            this.$refs['scrollqq'].forceUpdate(true);
          } else {
            this.$refs['scrollqq'].forceUpdate(false);
          }
          this.$vux.loading.hide();
        })
      },
      onPullingUp() {
        let limitcount = this.trainClassList.length;
        this.listQuery.skipCount = limitcount;
        this.fetchData();
      },
      onPullingDown() {
        this.search();
      },
      chooseUserType(item) {
        this.activeName = item.typeName;
        this.listQuery.userType = item.id;
        this.search();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allTrain {
    background: #ebeef2;
  }

  .train_div {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    margin-bottom: 5px;
    padding-top:70px;
  }

    .train_div h3 {
      font-size: 16px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

      .train_div h3 span {
        height: 16px;
        width: 4px;
        border-radius: 2px;
        display: block;
        background: #2269ff;
        margin-right: 5px;
      }

  .seach {
    width: 220px;
    height: 33px;
    background: #eee;
    border-radius: 10px;
    text-align: left;
    position: relative;
  }

    .seach input {
      appearance: none;
      background: transparent;
      border: none;
      height: 33px;
      width: calc(100% - 35px);
      outline: none;
      font-size: 14px;
      box-sizing: border-box;
      padding: 0 5px 0 10px;
    }

    .seach span {
      position: absolute;
      display: block;
      width: 30px;
      height: 33px;
      background: url('../../assets/images/search_icon.png') center center no-repeat;
      background-size: 15px 15px;
      right: 10px;
      top: 0;
    }

  .type {
    background: #fff;
    margin-bottom: 5px;
    height: 50px;
    display: flex;
    box-sizing: border-box;
    padding: 0 15px;
    align-items: center;
    position: relative;
    justify-content: space-between;
  }

    .type label {
      display: block;
      color: #fe6000;
      font-weight: bold;
      font-size: 14px;
      width: 45px;
      text-align: left;
    }

  .showMore {
    display: block;
    height: 20px;
    width: 20px;
    background: url('../../assets/images/show_more.png') center center no-repeat;
    background-size: 12px 7px;
    margin-left: 5px;
    transform: rotate(0deg);
    transition: .3s;
  }

    .showMore.hideMore {
      transform: rotate(180deg);
      transition: .3s;
    }

  .typeList1 {
    display: flex;
    width: calc(100% - 70px);
    justify-content: space-between;
  }

  ul, ul li {
    list-style: none;
    font-size: 14px;
  }

  .typeList1 li.active {
    font-weight: bold;
    color: #2269ff;
  }

  .typeList2 {
    background: #fff;
    position: absolute;
    top: 50px;
    left: 0;
    padding: 5px 15px;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid #efeff4;
    box-shadow: 0 2px 12px -2px rgba(0,0,0,.1);
    overflow: hidden;
    height: auto;
  }

    .typeList2 li {
      float: left;
      margin: 5px;
      width: calc(25% - 10px);
      height: 32px;
      border: 1px solid #efeff4;
      text-align: center;
      line-height: 32px;
      color: #999;
      box-sizing: border-box;
    }

      .typeList2 li.active {
        color: #2269ff;
        border-color: #2269ff;
      }

  .curse_box {
    padding: 15px;
    background: #fff;
  }

  .curse_list {
    padding-top: 10px;
  }

    .curse_list li:last-child {
      margin-bottom: 0;
    }

  .curse_item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    height: 90px;
  }

    .curse_item img {
      width: 135px;
      height: 90px;
    }

  .item_right {
    margin-left: 10px;
    width: calc(100% - 145px);
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

    .item_right h4 {
      font-size: 15px;
      font-weight: bold;
      color: #333;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      /* margin-bottom: 6px; */
      text-align: left;
    }

    .item_right p {
      background: url("../../assets/images/time_icon.png") left center no-repeat;
      background-size: 11px 11px;
      padding-left: 13px;
      color: #999;
      font-size: 12px;
      text-align: left;
    }

  .btnBox {
    text-align: left;
    /* margin-top: 15px; */
    height: 25px;
    display: flex;
  }

    .btnBox a {
      display: inline-block;
      width: 65px;
      height: 25px;
      text-decoration: none;
      text-align: center;
      line-height: 25px;
      font-size: 12px;
      border-radius: 5px;
      box-sizing: border-box;
    }

  .baoBtn {
    background: #2269ff;
    color: #fff;
  }

  .detailBtn {
    border: 1px solid #2269ff;
    color: #2269ff;
    margin-left: 12px;
  }
</style>
